---
title: Estilo de Markdown renderizado con Tailwind Typography
description: Aprende a usar @tailwind/typography para dar estilo a tu Markdown renderizado.
i18nReady: true
type: recipe
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Puedes utilizar el plugin de tipografía de [Tailwind](https://tailwindcss.com) para estilar el Markdown renderizado de fuentes como las [**colecciones de contenido**](/es/guides/content-collections/) de Astro.

Esta receta te enseñará a crear un componente de Astro reutilizable para estilar tu contenido Markdown usando las clases de utilidad de Tailwind.

## Prerrequisitos

Un proyecto de Astro que:

  - tiene [la integración de Tailwind de Astro](/es/guides/integrations-guide/tailwind/) instalada.
  - usa [las colecciones de contenido](/es/guides/content-collections/) de Astro.

## Configuración de `@tailwindcss/typography`

Primero, instala `@tailwindcss/typography` usando tu gestor de paquetes preferido.

<PackageManagerTabs>
 	<Fragment slot="npm">
	```shell 
	npm install -D @tailwindcss/typography
	```
	</Fragment>
  	<Fragment slot="pnpm">
	```shell 
	pnpm add -D @tailwindcss/typography
	```
	</Fragment>
  	<Fragment slot="yarn">
	```shell
	yarn add --dev @tailwindcss/typography
	```
	</Fragment>
</PackageManagerTabs>

Luego, añade el paquete como un plugin en tu archivo de configuración de Tailwind.

```diff lang="js"
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    // ...
  },
  plugins: [
+   require('@tailwindcss/typography'),
    // ...
  ],
}
```

## Receta

1. Crea un componente `<Prose />` para proporcionar un `<div>` de envoltura con un `<slot />` para tu Markdown renderizado. Añade la clase de estilo `prose` junto con cualquier [modificador de elemento de Tailwind](https://tailwindcss.com/docs/typography-plugin#element-modifiers) deseado en el elemento padre.

    ```astro title="src/components/Prose.astro"
    ---
    ---
    <div 
      class="prose dark:prose-invert 
      prose-h1:font-bold prose-h1:text-xl 
      prose-a:text-blue-600 prose-p:text-justify prose-img:rounded-xl 
      prose-headings:underline">
      <slot />
    </div>
    ```
    :::tip
    El plugin `@tailwindcss/typography` utiliza [**modificadores de elementos**](https://tailwindcss.com/docs/typography-plugin#element-modifiers) para estilar los componentes hijos de un contenedor con la clase `prose`.

    Estos modificadores siguen la siguiente sintaxis general:

      ```
      prose-[element]:class-to-apply
      ``` 

    Por ejemplo, `prose-h1:font-bold` da a todas las etiquetas `<h1>` la clase Tailwind `font-bold`.
    :::

2. Consulta tu entrada de colección en la página en la que quieras renderizar tu Markdown. Pasa el componente `<Content />` de `await entry.render()` a `<Prose />` como hijo para envolver tu contenido Markdown en los estilos de Tailwind.

    ```astro title="src/pages/index.astro"
    ---
    import Prose from '../components/Prose.astro';
    import Layout from '../layouts/Layout.astro';
    import { getEntry } from 'astro:content';

    const entry = await getEntry('collection', 'entry');
    const { Content } = await entry.render();
    ---
    <Layout>
      <Prose>
        <Content />
      </Prose>
    </Layout>
    ```

## Recursos

- [Documentación del plugin de tipografía de Tailwind](https://tailwindcss.com/docs/typography-plugin)
